<template>
  <div style="height: 100%;overflow:auto;background-color: #f5f5f5;padding: 0 0 60px 0;font-size: 14px;">
    <header>
      <div>
        <div class="header">
          <div class="user_content">
            <div class="logoContent show_logo_content">
              <a class="header_logo_goHome" @click="homePage">
                <img id="all_top_icon" src="../../../public/img/5d811034-b989-43a5-98cc-82df4bace7de.png"
                  style="height:49px;margin-top:-6px;">
              </a>
              <p id="all_top_title" style="margin-left:12px">支付</p>
            </div>
            <div class="userinfo login" style="display: block;">
              <a class="header_goHome" @click="homePage">
                <span class="toIndex">
                  返回首页
                </span>
              </a>
              <span v-if="userInfo && userInfo.id">|</span>
              <a v-if="userInfo && userInfo.id" class="header_goUser">
                <span class="username">{{ userInfo.phone }}</span>
              </a>
              |
              <a class="header_order">
                <span class="order">
                  我的订单
                </span>
              </a>|
              <span class="logout" v-if="userInfo && userInfo.id" @click="logoutFun">退出</span>
              <span class="logout" v-if="!userInfo || !userInfo.id" @click="loginPage">登录</span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="contain-box" style="background-color: #FFFFFF;margin-top: 20px;">
      <el-row>
        <el-col style="padding:10px 15px;background-color: pink; border:1px solid #7FFFD4;font-size: 20px;">应付金额
          <span style="color:#FF6347;font-weight: bold;">{{ total }}</span></el-col>
      </el-row>
      <el-row>
        <el-col style="padding:10px 15px;background-color: #FFFFFF; border:1px solid #7FFFD4;font-size: 20px;">应付金额
          支付方式:
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="8"
          style="padding:10px 15px;background-color: #FFFFFF; border:1px solid #7FFFD4;font-size: 20px;">应付金额
          <img v-if="paymentstatus" :src="'data:image/png;base64,' + paymentimage" style="width:100%">
          <span v-else>支付成功</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import api from '@/api/';
import data from '@/data/data.js';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      total: 5000,
      paymentimage: 'api/image/url/aaaa.png',
      userInfo: {},
      orderid:'',
      paymentstatus:false,
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  async mounted() {
    this.orderid=this.$route.query.orderid;
    console.log(this.orderid);
    const resultuser = await api.get("api/user/userinfo");
    this.userInfo = resultuser.data;
    console.log("------------------------------------------1");
    //获取收款信息

    const result = await api.get("api/payment/paymentimage/"+this.orderid);
    this.paymentimage = result.data;
    console.log("------------------------------------------2");

    setInterval(async () => {
      let result = await api.get("api/payment/check/"+this.orderid);
      if(result.code==200){
        this.paymentstatus=true;
      }
    }, 1500);
  },
  methods: {
    selectAddr(addr) {
      console.log(addr);
      this.selectedaddressid = addr.id;
      console.log(this.selectedaddressid);
    },
    //选择省
    selProvince() {
      console.info(this.form.province);
      this.citys = [];
      this.districts = [];
      this.citysAll.forEach(city => {
        if (this.form.province === city.parentCode) {
          this.citys.push(city);
        }
      })
    },
    //选择市
    selCity() {
      this.districts = [];
      this.districtsAll.forEach(district => {
        if (this.form.city === district.parentCode) {
          this.districts.push(district);
        }
      })
    },
    homePage() {//首页
      this.$router.push({ path: '/' });
    },
    loginPage() {//登录注册
      this.$router.push({ path: '/login' });
    },
    //初始化订单
    initOrders() {
      let value = this.$route.query.value;
      if (value) {
        let arr = value.split('*');
        arr.forEach((item) => {
          let paramArr = item.split('_');
          data.products.forEach((product) => {
            if (product.id == paramArr[0]) {
              product['num'] = paramArr[1];
              this.totalNum += parseInt(paramArr[1]);
              this.totalPrice += parseInt(paramArr[1]) * product.price;
              this.products.push(product);
            }
          })
        });
      }
    },
    openAddrModal() {
      this.addrModal = true;
      if (this.$refs['addrForm']) {
        this.$refs['addrForm'].resetFields();
      }
      this.form = {};
      this.citys = [];
      this.districts = [];
    },
    saveAddr() {//添加地址
      this.$refs.addrForm.validate(valid => {
        if (valid) {

        }
      });
    },
    toCar() {//返回购物车
      this.$router.push({ 'path': '/cart' });
    },
    async logoutFun() {//退出登录
      this.$confirm("确定退出登录?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const result = await api.postForm("/api/user/loginout");
          sessionStorage.removeItem("Authorization")
          this.$notify({
            title: '提示',
            message: '退出成功',
            type: 'success'
            //duration: 0//为0则不会自动关闭
          });
          //清除用户信息缓存

          this.$router.push({ path: '/' });
        })
    }
  }
}
</script>

<style scoped>
.header {
  margin: 0 auto;
  padding-top: 0px;
  background: #f9f9f9;
  height: 50px;
  line-height: 48px;
  border-bottom: solid 1px #d2d2d2;
}

.user_content {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}

.logoContent {
  float: left;
  vertical-align: top;
}

a {
  text-decoration: none;
  color: #000;
}

a {
  text-indent: 0px;
  cursor: pointer;
}

.logoContent p,
.logoContent img {
  display: inline-block;
}

.logoContent img {
  vertical-align: middle;
}

img {
  max-width: 100%;
  max-height: 100%;
}

img,
fieldset,
input {
  border: 0;
  outline: transparent;
}

.logoContent p,
.logoContent img {
  display: inline-block;
}

.logoContent p {
  font-size: 20px;
  line-height: 48px;
}

ul,
li,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.userinfo {
  float: right;
}

.userinfo span {
  padding: 0 5px;
  cursor: pointer;
}


.checkout-detail {
  position: relative;
  padding: 48px 0 0;
}

.checkout-detail .fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 70px;
  border-top: 1px solid #e0e0e0;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.checkout-detail .fixed-header .fixed-address-choose {
  position: relative;
  width: 1226px;
  margin: 0 auto;
}

.checkout-detail .fixed-header .fixed-address-choose .choose-btn {
  float: right;
}

.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.checkout-detail .fixed-header .fixed-address-choose .address-title {
  margin: 15px 0 0;
  line-height: 40px;
  color: #757575;
}

.checkout-detail .fixed-header .fixed-address-choose .address-title .address-desc {
  display: inline-block;
  margin-right: 25px;
}

.checkout-detail .detail-section {
  position: relative;
  padding: 0 24px;
}

.checkout-detail .address-detail .address-header {
  margin: 0 0 20px;
}

.checkout-detail .address-detail .address-header .header-title {
  color: #333;
  font-size: 18px;
  line-height: 20px;
}

.address-list .address-item {
  display: inline-block;
  width: 268px;
  height: 178px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  position: relative;
  margin-right: 17px;
  margin-bottom: 20px;
  vertical-align: top;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.address-list .address-action,
.address-list .address-info,
.address-list .telephone {
  line-height: 22px;
  color: #757575;
}

.address-list .address-info {
  padding: 15px 24px 0;
}

.address-list .name {
  font-size: 18px;
  color: #333;
  line-height: 30px;
  margin-bottom: 10px;
}

.address-list .name span {
  float: right;
  font-size: 14px;
  color: #757575;
}

.address-list .address-action {
  text-align: right;
  position: absolute;
  right: 24px;
  bottom: 10px;
  opacity: 0;
}

.address-list .address-action,
.address-list .address-info,
.address-list .telephone {
  line-height: 22px;
  color: #757575;
}

.address-list .address-con span {
  display: inline-block;
  margin-right: 3px;
  word-wrap: break-word;
}

.address-list .address-con .info {
  width: 100%;
}

.address-list .address-action span {
  color: #DF2625;
  margin-left: 10px;
}

.address-list .add-desc {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  color: #b0b0b0;
}

.address-list .iconfont {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 8px;
  font-size: 30px;
  line-height: 30px;
  background-color: #e0e0e0;
  border-radius: 17px;
  text-align: center;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  color: #fff;
}

/*.iconfont-plus:before {*/
/*  content: "\E609";*/
/*}*/
.checkout-detail .detail-section {
  position: relative;
  padding: 0 24px;
}

.checkout-detail .detail-section .detail-header {
  color: #333;
  font-size: 18px;
  line-height: 40px;
}

.goods-list {
  padding: 5px 0;
  border-bottom: 1px solid #e0e0e0;
}

.goods-list .good-item {
  position: relative;
  padding: 15px 0;
}

.goods-list .good-item .good-img {
  width: 60px;
  height: 60px;
  margin: 0 10px 0 0;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-img img {
  width: 60px;
  height: 60px;
}

img {
  border: 0;
}

.goods-list .good-item .good-name {
  width: 600px;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-name a {
  color: #424242;
}

a,
a:hover {
  text-decoration: none;
}

.goods-list .good-item .good-name a {
  color: #424242;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-price {
  width: 150px;
  text-align: center;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-status {
  width: 100px;
  text-align: center;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-total {
  width: 190px;
  text-align: right;
  color: #ff6701;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.checkout-detail .detail-section .section-options {
  padding: 25px 0;
  border-bottom: 1px solid #e0e0e0;
}

.checkout-detail .detail-section .section-options .options-header {
  width: 150px;
}

.checkout-detail .detail-section .section-options .options-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.checkout-detail .detail-section .section-options .options-header .title {
  color: #333;
  font-size: 18px;
  line-height: 38px;
}

.checkout-detail .detail-section .section-options .options-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.checkout-detail .detail-section .section-options .options-list {
  width: 960px;
}

.checkout-detail .detail-section .section-options .options-list .selected {
  border-color: #fff;
  color: #DF2625;
}

.checkout-detail .detail-section .section-options .options-list .options-item {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  margin-right: 14px;
  border: 1px solid #fff;
  color: #333;
}

.checkout-detail .detail-section .section-options:last-child {
  border: none;
}

.checkout-detail .detail-section .section-options .options-list a {
  cursor: pointer;
}

.checkout-detail .count-detail {
  position: relative;
  min-height: 200px;
  padding: 20px 0;
  margin: 0 48px;
}

.checkout-detail .count-detail .section-discount {
  position: absolute;
  left: 0;
  top: 20px;
}

.checkout-detail .count-detail .discount-coupon,
.checkout-detail .count-detail .discount-redpacket,
.checkout-detail .count-detail .position-box {
  position: relative;
}

.checkout-detail .count-detail .coupon-title.has-choose {
  color: #424242;
  cursor: text;
}

.checkout-detail .count-detail .coupon-title.coupon-title_recommend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.checkout-detail .count-detail .coupon-title {
  display: inline-block;
  height: 50px;
  cursor: pointer;
}

.checkout-detail .count-detail .icon-selected {
  position: relative;
  color: #83c44e;
  margin: 0 5px 0 0;
  font-size: 22px;
  vertical-align: middle;
  line-height: 20px;
}

checkout-detail .count-detail .coupon-title.coupon-title_recommend .use-coupon {
  line-height: 20px;
  max-width: 800px;
}

.checkout-detail .count-detail .coupon-title.coupon-title_recommend .over-price-text,
.checkout-detail .count-detail .coupon-title.coupon-title_recommend .recommend-text {
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  color: #DF2625;
  border-radius: 3px;
  border: 1px solid #DF2625;
  margin: 0 10px 0 15px;
  padding: 0 3px;
}

.checkout-detail .count-detail .coupon-title.coupon-title_recommend .change-btn {
  line-height: 20px;
}

.checkout-detail .count-detail .coupon-title.has-choose a {
  color: #DF2625;
  margin-left: 5px;
}

.checkout-detail .count-detail .discount-coupon,
.checkout-detail .count-detail .discount-redpacket,
.checkout-detail .count-detail .position-box {
  position: relative;
}

.checkout-detail .count-detail .coupon-title {
  display: inline-block;
  height: 50px;
  cursor: pointer;
}

.checkout-detail .count-detail .icon-plus {
  position: relative;
  display: inline-block;
  margin: 0 10px 0 0;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  vertical-align: middle;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  text-align: center;
  background-color: #DF2625;
}

.checkout-detail .count-detail .section-bill {
  position: absolute;
  right: 0;
  bottom: 20px;
}

.checkout-detail .count-detail .section-bill .bill-item {
  position: relative;
  padding-left: 126px;
  line-height: 2;
  text-align: right;
}

.checkout-detail .count-detail .section-bill .bill-item .bill-name {
  position: absolute;
  top: 0;
  left: 0;
  width: 126px;
  white-space: nowrap;
  color: #757575;
}

.checkout-detail .count-detail .section-bill .bill-item .bill-money {
  color: #DF2625;
}

.checkout-detail .count-detail .section-bill .total-price {
  margin: 10px 0 0;
}

.checkout-detail .count-detail .section-bill .bill-item .bill-money em {
  font-style: normal;
}

.checkout-detail .count-detail .section-bill .total-price em {
  font-size: 30px;
  line-height: 1;
}

.checkout-detail .footer-detail {
  padding: 20px 48px;
  border-top: 2px solid #f5f5f5;
}

.checkout-detail .detail-section {
  position: relative;
  padding: 0 24px;
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}

.checkout-detail .footer-detail {
  height: 80px;
}

.checkout-detail .footer-detail .handle-action {
  float: right;
  margin-top: 20px;
}

.checkout-detail .footer-detail .handle-action .operating-button {
  overflow: hidden;
}

.checkout-detail .footer-detail .handle-action .btn {
  float: right;
  margin-left: 30px;
  vertical-align: top;
}

.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.checkout-detail .footer-detail .handle-action .btn {
  float: right;
  margin-left: 30px;
  vertical-align: top;
}

.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s;
}

a {
  background-color: rgba(0, 0, 0, 0);
}

.address-list .address-item:hover {
  border-color: #b0b0b0;
}

.checkout-detail .detail-section .section-options .options-list .selected {
  border-color: #fff;
  color: #DF2625;
}

.btn-primary {
  background: #DF2625;
  border-color: #DF2625;
  color: #fff;
}

.btn-primary:hover {
  background-color: #DF2625;
  border-color: #DF2625;
  color: #fff;
}

.el-select-dropdown__item {
  padding: 0 20px !important;
}

.selectedbox {
  border: 1px solid green !important;
}
</style>
